<template>
  <div class="digital-number-wrap">
    <div class="digital-number-up" :style="`height: ${size}px;width: ${size}px;border-bottom: 2px solid ${color};border-left: 4px solid ${color};border-right: 4px solid ${color};`"></div>
    <div class="digital-number-down" :style="`height: ${size}px;width: ${size}px;border-top: 2px solid ${color};border-right: 4px solid ${color};`"></div>
  </div>
</template>

<script>
export default {
  name: 'NumberFour',
  props: {
    size: {
      type: Number,
      default: 10
    },
    color: {
      type: String,
      default: '#000'
    }
  }
}
</script>

<style scoped>
.digital-number-wrap{
  display: flex;
  flex-direction: column;
}
.digital-number-up{
  border-top: 4px solid rgba(0,0,0,0);
}
.digital-number-down{
  border-bottom: 4px solid rgba(0,0,0,0);
  border-left: 4px solid rgba(0,0,0,0);
}
</style>